<template>
	<div class="recom-container">
		<!-- 热门推荐详情页{{$route.params.id}} -->
		<!-- 引用头部组件 -->
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<!-- 轮播图部分 -->
		<div class="detail-swiper">
			<swiper :options="swiperOption">
			    <swiper-slide v-for="(item,index) in 5" :key="index">
			    	<a target="_blank" href="http://www.wwtliu.com/blog">
			    		<img :src="imgArr[0]" alt="">
			    	</a>
			    </swiper-slide>
			    <div class="swiper-pagination"  slot="pagination">
			    </div>
			</swiper>
		</div>
		<!-- 文字介绍部分 -->
		<div class="detail-title">
			<span>白纯家居布艺沙发</span>
			<p class="detail-share">
				<i class="iconfont icon-fenxiang"></i>
				<br>
				<span>分享</span>
			</p>
			<p class="detail-price">
				<i class="iconfont icon-renminbi"></i><span>998-1190</span>
			</p>
		</div>
		<div class="descript-wrap">
			选择合适家中空间的尺寸和形状，为每一位家人打造一个最爱的角落。
			侧边触手可及的口袋可存放遥控器，避免遥控器埋在枕头和休闲毯子下面。
		</div>
		<!-- 底部 -->
		<div class="detail-footer">
			<div class="footer-left">
				<i class="iconfont icon-erji"></i>
				<i class="iconfont icon-gouwuche"></i>
				<i class="iconfont icon-xinxing"></i>
			</div>
			<div class="footer-middle">
				加入购物车
			</div>
			<div class="footer-right">
				立即购买
			</div>
		</div>
		<!-- 占位div 避免底部导航栏遮挡 -->
		<div class="bottomzhanwei"></div>
	</div>
</template>
<script>
	import ShopHeader from "../../../components/shopheader"
	import  "../../../assets/iconfont/iconfont.css"
	export default{
		name:'recomdetail',
		data(){
			return{
				imgArr:[
					require("../../../assets/images/shopping/detailba.png")
				],
				swiperOption: {
		          	pagination: {
					    el: '.swiper-pagination',
					},
					loop:true,
					autoplay: {
					    delay: 3000,
					    stopOnLastSlide: false,
					    disableOnInteraction: false,
					}
		        },
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-sangedian"
						}
					],
					placeholder:" ",
					aimUrl:"/shopping/secondmall",
					rightUrl:''
				}
			}
		},
		components:{
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	.recom-container{
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		.detail-swiper{
			width: 100%;
			height: 622 / 2 / 50rem;
			// background-color: #185;
			margin-top: 88 / 2 / 50rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.iconStyle(){
			color: #333;
			font-size: 17 / 50rem;
			font-weight: 700;
		}
		.detail-title{
			width: 100%;
			height: 115 / 2 / 50rem;
			// background-color: red;
			margin-top: 54 / 2 / 50rem;
			padding: 10 / 2 / 50rem 20 / 2 / 50rem;
			box-sizing: border-box;
			position: relative;
			.iconStyle();
			span{
				
			}
			.detail-share{
				text-align: center;
				position: absolute;
				right: 24 / 2 / 50rem;
				top: 0;
				i{
					.iconStyle();
				}
				span{
					font-size: 12 / 50rem;
					color: rgba(0,0,0,0.7);
				}
			}
			.detail-price{
				margin-top: 32 / 2 / 50rem;
				i{
					.iconStyle();
					color: #f55;
				}
				span{
					.iconStyle();
					color: #f55;
				}
			}
		}
		.descript-wrap{
			width: 95%;
			margin: 28 / 2 / 50rem auto;
			.iconStyle();
			font-size: 15 / 50rem;
			color: rgba(0,0,0,.7);
			line-height: 20 / 50rem;
			text-indent: 25 / 50rem;
		}
		.detail-footer{
			width: 100%;
			height: 90 / 2 / 50rem;
			// background-color: red;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			border-top:1 / 50rem solid #f55;
			.commont(){
				color: #fff;
				font-size: 15 / 50rem;
				font-weight: 700;
				text-align: center;
				line-height:90 / 2 / 50rem; 
			}
			.footer-left,.footer-middle,.footer-right{
				height: 100%;
				float: left;
			}
			.footer-left{
				width: 270 / 2 / 50rem;
				.commont();
				color: #f55;
				i{
					font-size: 20 / 50rem;
					display: inline-block;
					margin-left: 20 / 2 / 50rem;
				}
			}
			.footer-middle{
				width: 240 / 2 / 50rem;
				background-color: #ff7f32;
				.commont();
			}
			.footer-right{
				.commont();
				width: 240 / 2 / 50rem;
				background-color: #ff3232;
			}
		}
		.bottomzhanwei{
			width: 100%;
			height: 90 / 2 / 50rem;
		}
	}
</style>